import { Button, Space, Table, Tag, Modal } from 'antd';
import React from 'react';
import { connect } from 'react-redux';
import * as actions from '../store/action.js';
import styles from '../index.less';
import { IP } from '../../../../../utils/request'
import moment from 'moment'
import CircleList from '../../../../Board/components/Center/Circle/warningContent'
class Index extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            pageIndex: 1,//默认页面为第一页
            pageSize: 10,
            information: {
                id: ''
            },//点击的告警信息
            visible: false,//弹框
            information1: {
                id: ''
            }//查看更多摄像机的id
        }
    }
    componentDidMount() {
        let page = {
            pageIndex: this.state.pageIndex-1,
            pageSize: this.state.pageSize,
        }
        if(this.props.information==undefined){
        this.props.getAllWarning(page)
        }else{
        
        }
    }
    click = (record, rowkey) => {
        if (this.props.information == undefined) {
            let kk = this.state.information
            kk.id = record.id
            this.setState({
                information: kk,
                visible: true
            })
            let ss = this.state.information1
            ss.id = record.vidicoId
            this.setState({
                information1: ss
            })

        }
        if (this.props.information != undefined) {
            let kk = this.state.information
            kk.id = record.id
            this.setState({
                information: kk,
                visible: true
            })
            let ss = this.state.information1
            ss.id = this.props.information[0].vidiconId
            this.setState({
                information1: ss
            })

        }

    }
    render() {
        const { warninglist ,totalCount,pageIndex,pageSize,Alarmdetails,pageTotal} = this.props;
        const {information} =this.state;
        const columns = [
            {
                title: "告警图片",
                dataIndex: "warningPhoto",
                fixed: 'left',
                align: "center",
                render: (text) => {
                    return <img src={IP + text} style={{ width: '60px', height: '40px' }} alt=""></img>
                }
            },
            {
                title: "告警时间",
                dataIndex: "warningTime",
                align: "center"
            },
            {
                title: "告警类型",
                dataIndex: "warningType",
                align: "center",
                render:(warningType)=>{
                    switch(warningType){
                        case '振动异常':return "振动异常"
                        case '事件异常':return "事件异常"
                    }
                }
            },
            {
                title: "告警地点",
                dataIndex: "warningAddress",
                align: "center"
            },
            {
                title: "状态",
                dataIndex: "status",
                align: "center",
            },
            {
                title: "人工甄别",
                dataIndex: "isManpower",
                align: "center",
                render: text => {
                    if (text) {
                        return "是"
                    } else {
                        return "否"
                    }
                }
            },
            {
                title: "派警",
                dataIndex: "isDistribute",
                align: "center",
                render: text => {
                    switch(text){
                        case '':return "未处理"
                        case '1':return "已派警"
                        case '0':return "未派警"
                    }
                }
            },
            {
                title: "反馈人",
                dataIndex: "userName",
                align: "center"
            },
            {
                title: "反馈时间",
                dataIndex: "feedbackTime",
                align: "center",
                render: (feedbackTime) => {
                    switch (feedbackTime) {
                        case 'Invalid date': break
                        default: return feedbackTime
                    }
                }

            },
            {
                title: "反馈内容",
                dataIndex: "feedbackContent",
                align: "center"
            },
        ] 
        const pagination = {
            current: pageIndex, //当前页
            total: totalCount,
            pageSize: pageSize,
            showTotal:total=>`共 ${totalCount} 条数据`,
            onChange: this.onChange
        }
        const pagination2 ={
            current: pageIndex, //当前页
            total: pageTotal,
            pageSize: pageSize,
            showTotal:total=>`共 ${pageTotal} 条数据`,
            onChange: this.onChange
        }
        return (
            <div className={styles._div}>
                <Table
                    columns={columns}
                    dataSource={this.props.information != undefined ?Alarmdetails : warninglist}
                    scroll={{ x: 1200, y: 500 }}
                    pagination={this.props.information != undefined ?pagination2 :pagination}
                    onRow={(record, rowkey) => {
                        return {
                            onClick: this.click.bind(this, record, rowkey)
                        }
                    }}
                   
                />
                <Modal
                    title='告警信息详情'
                    key={Math.random()}
                    visible={this.state.visible}
                    centered
                    destroyOnClose
                    footer={null}
                    onCancel={() => { this.setState({ visible: false }) }}
                    onOk={() => { this.setState({ visible: false }) }}
                    getContainer={false}
                    width={1000}
                >
                    <CircleList information={this.state.information} id={this.state.information1.id} currentpage={this.props.information != undefined ?pagination2.current : pagination.current } />
                </Modal>

            </div>
        )
    }
    // 页面跳转
    onChange = (current, pageSize) => {
        this.props.handlePageChange(current, pageSize);
    };
}
const mapStateToProps = (state) => ({
    warninglist: state.getAllWarning.warninglist,
    totalCount:state.getAllWarning.totalCount,
    Alarmdetails:state.Mapcamera.Alarmdetails,
    pageTotal:state.Mapcamera.pageTotal

})

const mapDispatchToProps = (dispatch) => ({
    getAllWarning(value,totalCount) {
        dispatch(actions.getAllWarningRequest(value,totalCount))
    },
})
export default connect(mapStateToProps, mapDispatchToProps)(Index);